<template>
  <section>
    <el-dialog title="修改题干" :visible.sync="stemVisible">
      <el-input type="textarea" :rows="3" v-model="question.Stem" placeholder="请输入题干"></el-input>
      <el-input v-model="question.PicurlFormat" placeholder="请输入图片地址"></el-input>
    </el-dialog>
    <el-dialog title="修改选项" :visible.sync="selVisible">
      <el-radio-group v-model="question.Answer">
        <el-radio-button label="A"></el-radio-button>
        <el-radio-button label="B"></el-radio-button>
        <el-radio-button label="C"></el-radio-button>
        <el-radio-button label="D"></el-radio-button>
        <el-radio-button label="E"></el-radio-button>
      </el-radio-group>
      <el-input type="text" v-model="question.Selections.A" auto-complete="off"/>
      <el-input type="text" v-model="question.Selections.B" auto-complete="off"/>
      <el-input type="text" v-model="question.Selections.C" auto-complete="off"/>
      <el-input type="text" v-model="question.Selections.D" auto-complete="off"/>
      <el-input type="text" v-model="question.Selections.E" auto-complete="off"/>
    </el-dialog>
    <el-dialog title="修改解析" :visible.sync="expVisible">
      <el-input type="textarea" :rows="3" v-model="question.Explain" placeholder="请输入解析干"></el-input>
      <el-input v-model="question.ExpPic" placeholder="请输入图片地址"></el-input>
    </el-dialog>
    <el-dialog title="题目详情" :visible.sync="dialogVisible" width="80%" @open="onOpen">
      <el-button type="success" round @click="currentQid--">上一题</el-button>
      <el-button type="success" round @click="currentQid++">下一题</el-button>
      <el-button type="warning" round @click="stemVisible=true">修改题干</el-button>
      <el-button type="warning" round @click="selVisible=true">修改选项</el-button>
      <el-button type="warning" round @click="expVisible=true">修改解析</el-button>
      <el-button type="danger" round @click="change()">提交修改</el-button>
      <el-card class="box-card" :style="{marginTop: '10px'}">
        <div slot="header" class="clearfix">
          <span>{{question.Id}}</span>
          <p v-html="renderLatexHTML(question.Stem)"></p>
          <img :src="question.Pic|urlFormat" class="image">
        </div>
        <el-tag type="success">{{question.Answer}}</el-tag>
        <div v-for="(val,key) in question.Selections" :key="val.id" class="text item">
          {{key}}:
          <span v-if="!/\.(jpg|png)$/.test(val)">
            <span v-html="renderLatexHTML(val)"></span>
          </span>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="analysis-content"
               v-html="renderLatexHTML(question.Explain)">
          </div>
        </div>
        <img :src="question.ExpPic|urlFormat" class="image">
      </el-card>
    </el-dialog>
  </section>
</template>

<script>
import LatexMixin from '@/common/mixin-latex'
import {QuestionService} from '@/service/api'

export default {
  mixins: [LatexMixin],
  name: 'QuestionView',
  props: ['visible', 'qid'],
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data: function () {
    return {
      question: {
        Selections: []
      },
      currentQid: 0,
      stemVisible: false,
      selVisible: false,
      expVisible: false
    }
  },
  watch: {
    'currentQid': 'getQuestion'
  },
  methods: {
    getQuestion: function () {
      QuestionService.one(this.currentQid)
        .then(res => {
          if (res) {
            this.question = res
          }
        })
    },
    onOpen: function () {
      this.currentQid = this.qid
      this.getQuestion()
    },
    change: function () {
      QuestionService.change(this.question)
        .then(res => {
          if (res) {
            this.question = res
            this.$message.success('修改成功')
          }
        })
    }
  }
}
</script>

<style scoped>
</style>
